<template>
  <view class="payMethodPage">
    <!-- 导航栏 -->
    <s-nav-bar
      title="支付方式管理"
      :background="'transparent'"
      :titleStyle="{ color: '#ffff', fontWeight: 'bold' }"
      statusBar
      fixed
      immersive
      back
      :backStyle="{ color: '#fff' }"
    >
      <view slot="right" @click="showCreatePopup">
        <s-icon name="plus" color="#fff" size="20"></s-icon>
      </view>
    </s-nav-bar>

    <!-- 顶部区域 -->
    <view class="top">
      <view class="info">
        <!-- 右侧信息 -->
        <view class="info-right">
          <view class="name">支付方式管理</view>
          <view class="company">共 {{ total }} 种支付方式</view>
        </view>
      </view>
    </view>

    <!-- 主内容区域 -->
    <view class="main">
      <!-- 支付方式列表 -->
      <view class="listBox">
        <view class="listHeader">
          <view class="headerItem">支付方式</view>
          <view class="headerItem">排序</view>
          <view class="headerItem">状态</view>
          <view class="headerItem">操作</view>
        </view>

        <view class="listContent">
          <view class="listItem" v-for="item in payMethodList" :key="item.id">
            <view class="itemCell">{{ item.name }}</view>
            <view class="itemCell">{{
              item.sort_order ? item.sort_order : 0
            }}</view>
            <view class="itemCell">
              <view
                class="statusTag"
                :class="item.status === '1' ? 'active' : 'inactive'"
              >
                {{ item.status === '1' ? "启用" : "禁用" }}
              </view>
            </view>
            <view class="itemCell">
              <view class="actionGroup">
                <s-icon
                  name="edit"
                  size="18"
                  color="#47c5c4"
                  @click="showEditPopup(item)"
                />
                <s-icon
                  name="delete"
                  size="18"
                  color="#f56c6c"
                  @click="showDeleteConfirm(item.id)"
                />
              </view>
            </view>
          </view>

          <view class="emptyTips" v-if="payMethodList.length === 0">
            <s-icon name="box" size="40" color="#ccc" />
            <view class="emptyText">暂无支付方式数据</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 创建/编辑支付方式弹窗 -->
    <s-popup
      v-model="showFormPopup"
      position="bottom"
      round
      :mask="true"
      mask-close
    >
      <view class="formContainer">
        <view class="formTitle">{{ isEdit ? "编辑支付方式" : "新建支付方式" }}</view>

        <view class="formItem">
          <view class="formLabel">支付方式名称</view>
          <uni-easyinput
            v-model="formData.name"
            placeholder="请输入支付方式名称"
            clearable
          />
        </view>

        <view class="formItem">
          <view class="formLabel">支付方式描述</view>
          <uni-easyinput
            v-model="formData.description"
            type="textarea"
            placeholder="请输入支付方式描述(可选)"
            clearable
          />
        </view>

        <view class="formItem">
          <view class="formLabel">排序值</view>
          <uni-easyinput v-model="formData.sort_order" :min="0" :max="999" />
        </view>

        <view class="formItem">
          <view class="formLabel">状态</view>
          <radio-group @change="handleStatusChange">
            <label class="radioLabel">
              <radio
                value="1"
                :checked="formData.status === '1'"
                color="#47c5c4"
              />
              启用
            </label>
            <label class="radioLabel">
              <radio
                value="0"
                :checked="formData.status === '0'"
                color="#f56c6c"
              />
              禁用
            </label>
          </radio-group>
        </view>

        <view class="buttonGroup">
          <s-button type="default" size="small" @click="showFormPopup = false">
            取消
          </s-button>
          <s-button
            type="primary"
            size="small"
            @click="handleSubmit"
            :loading="loading"
          >
            {{ isEdit ? "保存修改" : "创建支付方式" }}
          </s-button>
        </view>
      </view>
    </s-popup>
    <s-dialog></s-dialog>
  </view>
</template>

<script>
import Dialog from "@/uni_modules/s-ui/utils/dialog";

export default {
  data() {
    return {
      payMethodList: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      searchKeyword: "",

      showFormPopup: false,
      isEdit: false,
      loading: false,
      formData: {
        id: "",
        name: "",
        description: "",
        sort_order: 0,
        status: '1',
      },
    };
  },
  onLoad() {
    this.getPayMethodList();
  },
  methods: {
    // 获取支付方式列表
    getPayMethodList() {
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };

      if (this.searchKeyword) {
        params.keyword = this.searchKeyword;
      }

      this.sjuAjax.get("/payMethod/list", params, (res) => {
        if (res && res.code === 200) {
          this.payMethodList = res.data.list || res.data || [];
          this.total = res.data.pagination?.total || 0;
        }
      });
    },

    // 搜索支付方式
    handleSearch() {
      this.currentPage = 1;
      this.getPayMethodList();
    },

    // 清空搜索
    handleSearchClear() {
      this.searchKeyword = "";
      this.currentPage = 1;
      this.getPayMethodList();
    },

    // 分页变化
    handlePageChange(e) {
      this.currentPage = e.current;
      this.getPayMethodList();
    },

    // 显示创建弹窗
    showCreatePopup() {
      this.isEdit = false;
      this.formData = {
        id: "",
        name: "",
        description: "",
        sort_order: 0,
        status: '1',
      };
      this.showFormPopup = true;
    },

    // 显示编辑弹窗
    showEditPopup(item) {
      this.isEdit = true;
      this.formData = {
        id: item.id,
        name: item.name,
        description: item.description,
        sort_order: item.sort_order,
        status: item.status,
      };
      this.showFormPopup = true;
    },

    // 状态变更
    handleStatusChange(e) {
      this.formData.status = e.detail.value;
    },

    // 提交表单
    handleSubmit() {
      if (!this.formData.name) {
        uni.showToast({
          title: "请输入支付方式名称",
          icon: "none",
        });
        return;
      }

      this.loading = true;

      const api = this.isEdit ? "/payMethod/update" : "/payMethod/create";
      const successMsg = this.isEdit ? "修改成功" : "创建成功";

      this.sjuAjax.post(
        api,
        this.formData,
        (res) => {
          this.loading = false;
          if (res && res.code === 200) {
            uni.showToast({
              title: successMsg,
              icon: "success",
            });
            this.showFormPopup = false;
            this.getPayMethodList();
          }
        },
        () => {
          this.loading = false;
        }
      );
    },

    // 显示删除确认
    showDeleteConfirm(id) {
      Dialog({
        message: "确定要删除该支付方式吗？\n删除后不可恢复！",
      })
        .then(() => {
          this.handleDelete(id);
        })
        .catch(() => {
          // 取消操作
        });
    },

    // 执行删除
    handleDelete(id) {
      this.sjuAjax.post("/payMethod/delete", { id }, (res) => {
        if (res && res.code === 200) {
          uni.showToast({
            title: "删除成功",
            icon: "success",
          });
          this.getPayMethodList();
        }
      });
    },
  },
};
</script>
<style lang="scss">
.payMethodPage {
  width: 100vw;
  height: 100vh;
  background-color: var(--v-bg);
  display: flex;
  flex-direction: column;
}

/* 顶部区域 */
.top {
  width: 100vw;
  height: 300rpx;
  background: var(--v-linear);
  border-radius: 0 0 30rpx 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  .info {
    width: 90%;
    display: flex;
    align-items: center;
    .info-right {
      margin-left: 40rpx; /* Replaced gap: 40rpx */
    }

    /* 右侧信息 */
    .info-right {
      display: flex;
      flex-direction: column;
      .name {
        margin-bottom: 10rpx; /* Replaced gap: 10rpx */
      }
      .name {
        font-size: 44rpx;
        letter-spacing: 4rpx;
        color: #fff;
        text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.4);
        line-height: 1.2;
      }

      .company {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
      }
    }
  }
}

/* 主内容区域 */
.main {
  position: relative;
  top: -50rpx;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-bottom: 120rpx;
  
  > * {
    margin-bottom: 30rpx; /* Replaced gap: 30rpx */
    &:last-child {
      margin-bottom: 0; /* Remove margin from last child */
    }
  }

  .searchBox {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20rpx;
    box-shadow: var(--v-shadow);
    padding: 20rpx;
  }

  .listBox {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20rpx;
    box-shadow: var(--v-shadow);
    padding: 20rpx;
    overflow: hidden;

    .listHeader {
      display: flex;
      background: #f8f8f8;
      border-radius: 8rpx;
      padding: 20rpx 0;
      font-weight: bold;
      color: #666;

      .headerItem {
        flex: 1;
        text-align: center;

        &:first-child {
          flex: 2;
          text-align: left;
          padding-left: 20rpx;
        }

        &:last-child {
          flex: 1.5;
        }
      }
    }

    .listContent {
      .listItem {
        display: flex;
        align-items: center;
        padding: 25rpx 0;
        border-bottom: 1rpx solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .itemCell {
          flex: 1;
          text-align: center;
          font-size: 28rpx;
          color: #333;

          &:first-child {
            flex: 2;
            text-align: left;
            padding-left: 20rpx;
          }

          &:last-child {
            flex: 1.5;
          }
        }

        .statusTag {
          display: inline-block;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          font-size: 24rpx;

          &.active {
            background-color: #e1f3d8;
            color: #67c23a;
          }

          &.inactive {
            background-color: #fde2e2;
            color: #f56c6c;
          }
        }

        .actionGroup {
          display: flex;
          justify-content: center;
          > * {
            margin-right: 30rpx; /* Replaced gap: 30rpx */
            &:last-child {
              margin-right: 0; /* Remove margin from last child */
            }
          }
        }
      }

      .emptyTips {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60rpx 0;
        color: #999;

        .emptyText {
          margin-top: 20rpx;
          font-size: 28rpx;
        }
      }
    }

    .pagination {
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
    }
  }
}

/* 表单弹窗样式 */
.formContainer {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;

  .formTitle {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }

  .formItem {
    margin-bottom: 30rpx;

    .formLabel {
      margin-bottom: 15rpx;
      font-size: 28rpx;
      color: #666;
    }

    .radioLabel {
      margin-right: 30rpx;
      font-size: 28rpx;
    }
  }

  .buttonGroup {
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;

    button {
      flex: 1;
      margin: 0 10rpx;
    }
  }
}
</style>